<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BuyCar</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>

<div id="app">

    <div class="container">
        <div class="row">


            <table class="table table-bordered table-hover">
                <caption class="h4 text-warning text-center"> 购物车</caption>
                <tr>
                    <th>全选 <input type="checkbox" v-model="checkAll"></th>
                    <td>商品</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(item,index) in product">
                    <td>
                        <input type="checkbox" v-model="item.isSelected">
                    </td>
                    <td>
                        <!-- v-bind === :  动态绑定指令,用来对dom中的特定属性进行赋值, -->
                        <img :src="item.productCover" >{{item.productName}}
                    </td>
                    <td>
                        {{item.productPrice}}
                    </td>
                    <td>
                        <!-- .number 让获取输入框的中值时,为数字类型 -->
                        <!--.lazy 当输入框失去焦点时,更新数据 -->
                        <!--<input type="number" v-model.number.lazy="item.productCount">-->
                        <input type="number" v-model.number="item.productCount">
                    </td>
                    <td>
                        <!-- 过滤器,不改变原数据,只改变显示效果 -->
                        {{item.productPrice * item.productCount | toMyFixed(2) }}
                    </td>
                    <td><button class="btn btn-danger" @click = "remove(index)">删除</button></td>
                </tr>
                <tr >
                    <td colspan="6" >总价:{{sum | toMyFixed(2) }}</td>
                </tr>

            </table>
        </div>

    </div>


</div>


<!-- 基于promise 独立于vue的库(网络请求) -->
<!-- Promise : 用来解决回调问题
     三个状态: 成功,失败,等待
 -->

<script src="../node_modules/axios/dist/axios.js"></script>


<script src="../node_modules/vue/dist/vue.js"></script>
<script>


    let vm = new Vue({
        el: '#app',

        data: {
            product: []
        },
//        在vue 实例 数据初始化后 会自动调用此方法,通常用来进行网络请求等相关操作
        // 属于生命周期方法,也称作钩子函数

        created() {
            // 使用function 函数 时 成功回调中的this 指向的并不是vue实例,

            // 可以使用箭头函数避免这个问题
            this.getData()
        },
        methods: {
            getData() {
                axios.get('./cars.json').then(res => { // 成功回调
                    this.product = res.data;
                }, err => {
                    console.log(err);
                })
            },
            remove(i){

                this.product = this.product.filter((item,index) => {
                    return i !== index
                })
//                this.product.splice(i,1)
            }
        },
        filters:{  // 可以写自定义的过滤器

            // 第一个参数input 为默认管道符传递的结果
            toMyFixed(input,param1){  // 在方法中,这里的this 是window

                return input.toFixed(param1)
            }
        },
        computed:{  // 这里的属性都会挂到vm上,所以不能同data和methods有重名的情况

            checkAll:{  // get 和set 中的this都指向实例
                get(){
                    return this.product.every((item)=>{
                        return item.isSelected
                    })

                },
                set(newValue){
                    this.product.forEach((item)=>{
                        item.isSelected = newValue
                    })
                }

            },
            /*sum:{    // sum 结果会被缓存,若依赖的数据没有变化,不会重新计算
                get(){
                    return this.product.reduce((prev,next)=>{
                       if (!next.isSelected) return prev;
                       return prev + next.productCount * next.productPrice
                    },0)
                }
            }*/
            // 如果计算属性写成函数,则表示仅有get方法
            sum(){
                return this.product.reduce((prev,next)=>{
                    if (!next.isSelected) return prev
                    return prev + next.productCount * next.productPrice
                },0)
            }
        }

    })
</script>

</body>
</html>